import path from 'path';
import { createRouter,createWebHashHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        component:()=>import('@/pages/index.vue')
    },
    {
        path: '/about',
        component:()=>import('@/pages/about.vue') 
    },
    {
        path: '/news',
        component:()=>import('@/pages/news.vue'),
        // 第一种写法:传递params参数,需要在路径后边写上要传递的参数的占位符,跳转该路由的时候只能通过name属性跳转进来
        // 配置 props 的作用是,把该路由当做组件,给组件传prop,在页面中可以直接 defineProps 接收传递的参数
        // children:[{
        //     name:'detail',
        //     path: 'detail/:id/:title/:content?',
        //     component:()=>import('@/pages/detail.vue'),
        //     props:true
        // }]
        // 第二种写法,传递query参数,想实现第一种直接defineProps用,prop接收的就是路由(route,可以打印查看)一系列的东西,可以自定义返回params或者query或者别的
        children:[{
            name:'detail',
            path: 'detail',
            component:()=>import('@/pages/detail.vue'),
            props(route:Object[]){
                // console.log('~~~~~',route)
                return route.query
            }
        }]
    },
    {
        path:'/com_prop',
        name:'comProp',
        component:()=>import('@/pages/communication/prop.vue')
    },
    {
        path:'/com_custom',
        name:'comCustom',
        component:()=>import('@/pages/communication/custom.vue')
    },
    {
        path:'/com_mitt',
        name:'comMitt',
        component:()=>import('@/pages/communication/mitt.vue')
    },
    {
        path:'/com_vmodel',
        name:'comModel',
        component:()=>import('@/pages/communication/vmodel.vue')
    },
    {
        path:'/search',
        name:'search',
        component:()=>import('@/pages/search.vue')
    },
    
]

export default createRouter({
    history: createWebHashHistory(),
    routes
})